var address;
// <option value="">请选择</option>
var province = document.querySelector(".province");
var city = document.querySelector(".city");
var district = document.querySelector(".district");
var county = document.querySelector(".county");

var provinceArr = [];
var cityArr = [];
var districtArr = [];
var countyArr = [];

function provincelinkage() {
	province.innerHTML = "<option>请选择</option>"
	address.forEach(function(item, index) {
		var option = document.createElement("option");
		option.setAttribute("value", "1_" + index);
		option.innerText = item.name;
		province.appendChild(option);
	})
	citylinkage();
}
provincelinkage();

function citylinkage() {
	province.onchange = function() {
		var _index = this.selectedIndex;
		if (_index == 0) {
			city.innerHTML = '';
			district.innerHTML = '';
			county.innerHTML = '';
			return;
		}
		cityArr = address[_index - 1].childs;
		city.innerHTML = "<option>请选择</option>"
		cityArr.forEach(function(item, index) {
			var option = document.createElement("option");
			option.setAttribute("value", "2_" + index);
			option.innerText = item.name;
			city.appendChild(option);
		})
		districtlinkage(cityArr);
		Array.from(address_group).forEach(function(item) {
			item.style.opacity = "1"
		})
	}
}

function districtlinkage(cityArr) {
	city.onchange = function() {
		var _index = this.selectedIndex;
		if (_index == 0) {
			district.innerHTML = '';
			county.innerHTML = '';
			return;
		}
		districtArr = cityArr[_index - 1].childs;
		district.innerHTML = "<option>请选择</option>"
		districtArr.forEach(function(item, index) {
			var option = document.createElement("option");
			option.setAttribute("value", "3_" + index);
			option.innerText = item.name;
			district.appendChild(option);
		})
		subdistrictlinkage(districtArr);
	}
}

function subdistrictlinkage(districtArr) {
	district.onchange = function() {
		var _index = this.selectedIndex;
		if (_index == 0) {
			county.innerHTML = '';
			return;
		}
		countyArr = districtArr[_index - 1].childs;
		county.innerHTML = "<option>请选择</option>"
		countyArr.forEach(function(item, index) {
			var option = document.createElement("option");
			option.setAttribute("value", "4_" + index);
			option.innerText = item.name;
			county.appendChild(option);
		})
		subdistrictlinkage(countyArr);
	}
}

var address_group = document.querySelectorAll(".address_group>select");

function selectNone() {
	Array.from(address_group).forEach(function(item) {
		item.style.opacity = "0"
	})
	address_group[0].style.opacity = "1"
};

selectNone();

var add_address = document.querySelector(".add_address");
var modal = document.querySelector(".modal");
var closeForm = document.querySelector(".closeForm");
var close_btn = document.querySelector(".close_btn");
var save = document.querySelector(".save");

var username = document.querySelector("#username");
var iphone = document.querySelector("#iphone");

var province = document.querySelector(".province");
var city = document.querySelector(".city");
var district = document.querySelector(".district");
var county = document.querySelector(".county");

var addresInfo = document.querySelector("#addresInfo");
var postal = document.querySelector("#postal");
var fixedLine = document.querySelector("#fixedLine");
var e_mail = document.querySelector("#e_mail");

var add_addr = document.querySelector(".add_addr");

var site_list = document.querySelector(".site_list>ul");
add_addr.onclick = function() {
	modal.style.display = "block";
}

function addstyle() {
	var from_name = username.value;
	var from_iphone =iphone.value;
	var from_province = province.options[province.selectedIndex].text + " ";
	var from_city = city.options[city.selectedIndex].text + " ";
	var from_district = district.options[district.selectedIndex].text + " ";
	var from_street = county.options[county.selectedIndex].text + " ";

	var from_addr = addresInfo.value + " ";
	var from_mail = postal.value + " ";
	var from_fixedline = fixedLine.value + " ";
	var from_email = e_mail.value + " ";

	var details_street = from_province + from_city + from_district + from_street;

	site_list.innerHTML = site_list.innerHTML +
		"<li class='fl'>" +
		"<div class='site_text'>" +
		"<div class='maddr_name'>" +
		"<span class='username'>" + from_name + "</span>" +
		"<span class='fr'>" +"<span>+</span>"+ 
		"<span class='iphone'>" + from_iphone + "</span>" + "</span>" +
		"</div><div class='maddr_addr'>" +
		"<span>地址：</span>"+
		"<span class='province_name'>" + from_province + "</span>" +
		"<span class='city_name'>" + from_city + "</span>" +
		"<span class='district_name'>" + from_district + "</span>" +
		"<span class='street_name'>" + from_street + "</span>" +
		"<span class='detailed_addr'>" + from_addr + "</span>" +
		"<span class='mailbox'>" + from_mail + "</span>" +
		"<span class='fixed_line'>" + from_fixedline + "</span>" +
		"<span>邮编：</span>"+
		"<span class='email'>" + from_email + "</span>" + "</div>" +
		"<div class='compile clearfix'>" +
		"<div class='set_info fl'>设为默认</div>" +
		"<div class='set_compile fr'>" +
		"<div class='ompile_btn fl'><img src='images/payment/bianji.png'></div>" +
		"<div class='del_btn fl'><img src='images/payment/shanchu.png'></div>" + "</div></div></div></li>";
	var ompile_btn = document.querySelectorAll(".ompile_btn");
	Array.from(ompile_btn).forEach(function(item){
		item.onclick = compile;
	})
	
	var del_btn = document.querySelectorAll(".del_btn");
	Array.from(del_btn).forEach(function(item){
		item.onclick = delLi;
	})
}

var form_group = document.querySelectorAll(".form_group input");
var list_group = document.querySelector(".list_group");

add_address.onclick = function() {
	modal.style.display = "block";

}
closeForm.onclick = close_btn.onclick = function() {
	modal.style.display = "none";
}
save.onclick = function() {
	add_address.style.display = "none";
	modal.style.display = "none";
	list_group.style.display = "block";
	addstyle();
	Array.from(form_group).forEach(function(item) {
		item.value = "";
	})
}
//编辑
function compile(){
	var compileLi = this.parentNode.parentNode.parentNode;
	var name = compileLi.querySelector(".username");
	username.value = name.innerText;
	
	var iphone_num = compileLi.querySelector(".iphone");
	iphone.value = iphone_num.innerText;
	
	var province_name = compileLi.querySelector(".province_name");
	province.value = province_name.innerText;
	var city_name = compileLi.querySelector(".city_name");
	city.value = city_name.innerText;
	
	var district_name = compileLi.querySelector(".district_name");
	district.value = district_name.innerText;
	
	var street_name = compileLi.querySelector(".street_name");
	county.value = street_name.innerText;
	
	var detailed_addr = compileLi.querySelector(".detailed_addr");
	addresInfo.value = detailed_addr.innerText;
	
	var mailbox = compileLi.querySelector(".mailbox");
	postal.value = mailbox.innerText;
	
	var fixed_line = compileLi.querySelector(".fixed_line");
	fixedLine.value = fixed_line.innerText;
	
	var email = compileLi.querySelector(".email");
	e_mail.value = email.innerText;
	modal.style.display = "block";
}

//删除
function delLi(){
	var site_list = document.querySelector(".site_list ul");
	var delLi = this.parentNode.parentNode.parentNode.parentNode;
	site_list.removeChild(delLi);
	if(site_list.children.length<1){
		add_address.style.display = "block";
		list_group.style.display = "none";
	}
}

//支付方式
var panel_list = document.querySelectorAll(".panel_list>li");

Array.from(panel_list).forEach(function(itemA){
	itemA.onclick = function(){
		Array.from(this.parentNode.children).forEach(function(itemB){
			itemB.classList.remove("addStyle");
		})
		this.classList.add("addStyle");
	}
})